<template>
  <!-- ---采购计划   -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="formInline.key" placeholder="请输入合作公司" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
          <el-button class="ebtn" type="primary" plain @click="PurchasePlanAdd(1)">新增计划</el-button>
          <el-button class="ebtn" type="primary" plain @click="salePlan">销售计划</el-button>
        </el-form>
      </div>
    </div>

    <!-- =================列表表单 =====================  -->
    <div class="incolumn_from">
      <el-table
        :data="tableData_PURCHPLAN"
        style="width: 100%;background-color:#fff"
        :height="autoHeightTable"
        stripe
      >
        <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" align="center"></el-table-column>
        <el-table-column prop="renderTime(createonTime)" label="计划时间" align="center">
          <template v-slot="scope">
            {{ renderTime(scope.row.createonTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <span v-show="scope.row.status==0">待执行</span>
            <span v-show="scope.row.status==1">待审核</span>
            <span v-show="scope.row.status==2">待收货</span>
            <el-button v-if="scope.row.status == 3" type="text" size="medium"
                       @click="getBOhui(scope.row.checkflowId)">驳回
            </el-button>
<!--            <span v-show="scope.row.status==3">驳回</span>-->
            <span v-show="scope.row.status==4">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-switch class="switch"
                       @change="changeswitch($event,scope.row,scope.$index)"
                       v-model="scope.row.isZhixing"
                       active-color="#13ce66"
                       active-text="执行"
                       :active-value="1"
                       :inactive-value="0"
                       inactive-text="关闭">
            </el-switch>
            <el-button type="text" size="small" @click="showDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
      <!-- ================================================================= -->
      <!-- ---========== 采  购   弹  框  ============--- -->
      <!-- ================================================================= -->
      <el-dialog :visible.sync="dialogTableVisibleBts" :modal-append-to-body="false" width="1450px">
        <div class="herd_bud"></div>
        <div class="from_bt">{{ isEdit==true?"新增计划":"计划详情"}}</div>
        <br/>
        <p class="Purchase_Division"></p>
        <br/>
        <el-form :model="formSupplier" :inline="true" class="demo-form-inline" label-width="83px">
          <el-form-item label="供应商">
            <el-select v-model="value" placeholder="请选择" @change="currentSec">
              <el-option
                v-for="(item,index) in options_supplier"
                :key="item.id"
                :label="item.enterpriseNumber"
                :value="item.enterpriseNumber">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="订单编号">
             <el-input
               v-model="formSupplier.orderNumber"
               placeholder="输入订单编号"
               style="width: 150px">
             </el-input>
           </el-form-item>-->
          <el-form-item>
            <el-button v-show="isEdit==true" plain type="primary" @click="addRow">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableDataPRODUCT" style="width: 100%;" :height="450" :max-height="300" stripe>
          <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
          <el-table-column label="产品图号" align="center">
            <template slot-scope="scope">
              <el-select :disabled="isEdit==false" v-model="scope.row.tuhao" placeholder="请选择" @change="currentSec_product(scope.$index,$event)">
                <el-option
                  v-for="(item,index) in options_product"
                  :key="item.id"
                  :label="item.productTuhao"
                  :value="item.productTuhao">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center">
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.unit"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单价(元)" align="center">
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="采购数量" align="center" width="100" prop="purchaseNumber">
            <template slot-scope="scope">
              <el-input :disabled="isEdit==false" @input="Calculation(scope.$index)" v-model="scope.row.purchaseNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小计(元)" align="center" width="100">
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.xiaoji"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="计划到货时间" align="center">
            <template  slot-scope="scope">
              <el-date-picker
                v-if="isEdit==true"
                v-model="scope.row.planArrivalTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 150px">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column v-if="isEdit==true" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="resetForm(scope)"
                size="small"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="from_tab_btn">
          <el-button v-show="isEdit==true" @click="ConfirmBts()" type="primary" size="small">确认</el-button>
          <el-button @click="dialogTableVisibleBts = false" type="info" size="small">取消</el-button>
        </div>
      </el-dialog>
      <!--====================执行弹框=============================-->
      <el-dialog :visible.sync="dialogTableVisibleBts_zhiXing" append-to-body width="20%">
        <span>
          请输入订单编号：
        </span>
        <el-input v-model="order_number"></el-input>
        <span slot="footer" class="dialog-footer">
        <el-button @click="ConfirmBts_addOrderNumber(1)">取 消</el-button>
        <el-button type="primary" @click="ConfirmBts_addOrderNumber(2)">确 定</el-button>
  </span>
      </el-dialog>


      <el-dialog
        title="驳回详情"
        :visible.sync="dialogVisible_bohui"
        width="50%"
        :modal-append-to-body="false">
        <ul :data="bohuilist" class="bohuizujian">
          <li>
            <span>审核日期</span>
            <el-input v-model="bohuilist.checkTime" style="width: 70%;" disabled></el-input>
          </li>
          <li>
            <span>审核人</span>
            <el-input v-model="bohuilist.userName" style="width: 70%;" disabled></el-input>
          </li>
          <li>
            <span>驳回理由</span>
            <el-input v-model="bohuilist.bohuiReason" style="width: 70%;" disabled></el-input>
          </li>
        </ul>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible_bohui = false">返 回</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 79;
    },
  },
  data() {
    return {
      dialogVisible_bohui: false,
      bohuilist:{
        bohuiReason:"",
        checkTime:"",
        userName:"",
      },
      value: "",
      isEdit: true,
      aa: [1, 2, 3, 4, 5],
      order_id: "",//选中的订单id
      order_number: "",//订单编号
      table_index: null,//全局的table的index
      dialogTableVisibleBts_zhiXing: false,
      num: 0,
      options_product: [],//产品的集合
      allProducts: [],
      tableData_PURCHPLAN: [],//列表
      tableDataPRODUCT: [],
      formSupplier: {id: null, orderNumber: ""},
      options_supplier: [],//供应商选项集合
      supplierSeted: {},//选中的供应商的对象
      //是否执行
      isExecute: false,
      //将页面的操作枚举出来
      optionType: {detailTitle: {0: "未定义", 1: "新增采购计划", 2: "编辑采购计划", 3: "采购计划详情"}},
      type: 0,
      remind: "",
      pmonth: "",
      pyear: "",
      //下拉选
      optionsBp: [
        {
          value: "1",
          label: "3天"
        },
        {
          value: "2",
          label: "5天"
        },
        {
          value: "3",
          label: "10天"
        }
      ],
      //弹框
      dialogTableVisibleBts: false,
      dialogTableVisibleBy: false,
      formInlineBa: {},
      formInlineAs: {},
      //表单
      tableData: [{}],
      tableDataBs: [{}],
      tableDataBy: [{}],
      tableDataBk: [{}],
      //分页
      formInline: {key: ""},
      start: "",
      end: "",
      total: 1,
      current: 1,
      pagesize: 10,
      no: "",
      jsondata: "",
      and: ""
    };
  },
  created() {
    this.getOwnSuppers();
    this.getAllProducts();
    this.getList();
  },
  methods: {
    getBOhui(checkflowId) {
      this.dialogVisible_bohui = true
      axios("/JX_java/procurement/getCheckFlowDetails?checkFlowId=" + checkflowId).then((res) => {
        console.log(res)
        let relse = res.data.data
        this.bohuilist = relse
        console.log(this.bohuilist)
      })
    },
    showDetail(data) {

      this.isEdit = false;
      axios.get("/JX_java/procurement/caigou/getOrderDetails?orderId=" + data).then(res => {
        console.log(res.data.data)
        this.options_supplier.forEach(e => {
          if (res.data.data.supplierId == e.id) {
            this.value = e.enterpriseNumber
          }
        })
        //产品
        //=
        this.tableDataPRODUCT=[]
        res.data.data.products.forEach(e => {
          const aa = {};//
          aa.tuhao= e.productNumber//图号
          aa.name= e.productName//
          aa.unit= e.danwei
          aa.price= e.price
          aa.purchaseNumber= e.number
          aa.xiaoji= e.xiaoji
          aa.planArrivalTime= e.daohuoTime
          this.tableDataPRODUCT.push(aa)
        })

      })
      this.dialogTableVisibleBts = true;
    },
    ConfirmBts_addOrderNumber(type) {
      if (type == 1) {
        this.dialogTableVisibleBts_zhiXing = false;
        let index = this.table_index
        console.log(this.tableData_PURCHPLAN[index].status)
        this.tableData_PURCHPLAN[index].isZhixing = 0
      }
      if (type == 2) {
        if (this.order_number == "") {
          this.$message.error("订单号不能为空");
          return;
        }
        axios.get("/JX_java/procurement/caigoujihua/executeButton?orderId=" + this.order_id + "&&orderNumber=" + this.order_number).then(res => {
          console.log(res.data.data)
        });
        this.dialogTableVisibleBts_zhiXing = false;
        let index = this.table_index
        this.tableData_PURCHPLAN[index].isZhixing = 1
      }

    },
    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);
    },
    changeswitch(row, data, index) {
      if (row==0) {
        this.tableData_PURCHPLAN[index].isZhixing = 1
        this.$message.error("对不起,不能关闭")
        return
      }
      this.table_index = index;
      // this.tableData_PURCHPLAN[index].status=0
      this.dialogTableVisibleBts_zhiXing = true;
      this.order_id = data.id
      console.log(row)
    },
    //列表展示
    getList() {
      const data = {
        "beginTime": "",
        "endTime": "",
        "key": "",
        "pageNum": 0,
        "pageSize": 10,
        "type": 0
      }
      let message = JSON.parse(localStorage.getItem("message"));
      axios.post("/JX_java/procurement/caigou/getorderList?type=" + 2 + "&&userId=" + message.Id, data).then(res => {
        console.log(res.data.data,11111111111)
        this.tableData_PURCHPLAN = res.data.data.content
      })
    },
    ConfirmBts() {
      const data = {
        "createUserid": 0,
        "createUsername": "",
        "createonTime": "",
        "id": 0,
        "orderNumber": "",
        "products": [],
        "status": 0,
        "supplierId": 0,
        "supplierName": "",
        "type": 0
      }

      let message = JSON.parse(localStorage.getItem("message"));
      data.createUserid = message.Id;
      data.createUsername = message.Name;
      data.supplierId = this.supplierSeted.id
      data.supplierName = this.supplierSeted.enterpriseName
      data.type = 2//采购计划

      this.tableDataPRODUCT.forEach(e => {
        const product = {
          "danwei": "",
          "daohuoTime": "",
          "id": 0,
          "number": 0,
          "orderId": 0,
          "price": 0,
          "productId": 0,
          "productName": "",
          "productNumber": "",
          "rukuNumber": 0,
          "tiqianTixing": 0,
          "xiaoji": 0,
          "xuhao": 0
        }
        product.price = e.price;
        product.productName = e.name;
        product.danwei = e.unit;
        product.xiaoji = e.xiaoji
        product.daohuoTime = e.planArrivalTime;
        product.number = e.purchaseNumber
        product.productNumber = e.tuhao;
        data.products.push(product)
      })
      console.log(this.tableDataPRODUCT);
      axios.post("/JX_java//procurement/caigou/caigouProducts?type=" + 2, data).then(res => {
        console.log(res.data.data, "后台相应")
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.$router.go(0);
        } else {
          this.$message.success(res.data.data);
        }
      })
    },
    Calculation(index) {
      console.log(this.tableDataPRODUCT[index].price, "333", parseInt(this.tableDataPRODUCT[index].purchaseNumber));
      this.tableDataPRODUCT[index].xiaoji = this.tableDataPRODUCT[index].price * parseInt(this.tableDataPRODUCT[index].purchaseNumber);
    },
    currentSec_product(index, d) {
      console.log(index, d)
      this.options_product.forEach(e => {
        if (e.productTuhao == d) {
          this.tableDataPRODUCT[index].name = e.productName;
          this.tableDataPRODUCT[index].unit = e.danwei;
          this.tableDataPRODUCT[index].price = e.price;
          this.tableDataPRODUCT[index].xiaoji = 0;
        }

      })
    },
    getAllProducts() {
      let message = JSON.parse(localStorage.getItem("message"));
      axios.get("/JX_java/common/getSupperAndProductList?udserId=" + message.Id).then(res => {
        this.allProducts = res.data.data;
        console.log(this.allProducts, "所有的产品")
      })
    },
    //动态添加行
    addRow() {
      const list = {};
      this.tableDataPRODUCT.push(list);
    },
    //动态删除行
    resetForm(e) {
      this.tableDataPRODUCT.splice(e.$index, 1);
    },
    currentSec(data) {
      this.options_supplier.forEach(e => {
        if (e.enterpriseNumber == data) {
          this.supplierSeted = e;
          return;
        }
      })
      this.allProducts.forEach(e => {
        if (this.supplierSeted.id == e.supplierId) {
          this.options_product = e.suppliercontractProducts
        }
      })
      console.log(this.supplierSeted, "选中的供应商")
    },
    //获取所有的名下是的
    getOwnSuppers() {
      let message = JSON.parse(localStorage.getItem("message"));
      axios.get("/JX_java/common/getSupperList?udserId=" + message.Id).then(res => {
        this.options_supplier = res.data.data;
      })
    },
    // 日期改变
    chage(e) {
      console.log(e);
      if (e) {
        this.start =
          e[0].getFullYear() +
          "-" +
          (e[0].getMonth() + 1) +
          "-" +
          e[0].getDate();
        this.end =
          e[1].getFullYear() +
          "-" +
          (e[1].getMonth() + 1) +
          "-" +
          e[1].getDate();
      } else {
        this.start = "";
        this.end = "";
      }
    },
    // 筛选
    onsubmit() {
      this.getData(0);
    },
    //分页
    handleCurrentChange(e) {
      this.getData(e - 1);
    },
    //销售计划
    salePlan() {
      this.$router.push("./PlanManageAdd");
    },
    //采购
    PurchasePlanAdd(type) {
      this.tableDataPRODUCT=[],
      this.isEdit = true;
      this.dialogTableVisibleBts = true;
      this.type = type
    },
  }
};
</script>
<style lang="scss">

.bohuizujian{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 33%;
    padding-top: 10px;
    text-align: center;
    span{
      display: inline-block;
      width: 25%;
    }
  }
}

.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
.switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span {
  margin-right: 9px;
}

/*关闭时文字位置设置*/
.switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span {
  margin-left: 9px;
}

/*显示文字*/
.switch .el-switch__label.is-active {
  display: block;
}

/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 55px !important;
  margin: 0;
}

</style>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
//第一块儿
.incolumn_countr {
  margin-left: 15px;
  height: 50px;
  width: 97%;
  background-color: white;
  padding-top: 10px;
}

.Purchase_Division {
  border: 0.5px solid $linecolor;
}

.block {
  margin-left: 20px;
  cursor: pointer;
}

.block_Math {
  cursor: pointer;
}

//第二块
.incolumn_from {
  margin-top: 15px;
  margin-left: 15px;
  width: 98%;
  height: 100%;
}

.from_bt {
  margin-top: -20px;
  margin-left: 10px;
  font-size: $font-size-medium-x;
  font-weight: bold;
}

.from_bta {
  font-size: $font-size-medium-x;
  margin-left: -60px;
}

.from_tab_zt3 {
  margin-left: 40px;
}

.from_ipt_wb2 {
  height: 25px;
  width: 20%;
  border: none;
  border: 1px solid $linecolor;
  border-radius: 4px;
  padding: 10px;
}

.from_cg {
  font-size: $font-size-medium-x;
  font-weight: bold;
  margin-top: -20px;
  margin-left: 10px;
}

.from_tab_btn {
  text-align: center;
  margin-top: 30px;
}

.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}

.herd_bud {
  margin-top: -40px;
  height: 20px;
  width: 5px;
  background-color: rgb(52, 144, 231);
}

.ebtn {
  float: right;
  margin-right: 20px;
}
</style>
